<template>
  <nav class="navbar-status">
    <ul>
      <li
          v-for="(status, index) in statuses"
          :key="status.value"
          :class="{ active: currentStatus === status.value }"
          :data-index="index"
          @click="changeStatus(status.value)"
      >
        <span>{{ status.label }}</span>
      </li>
    </ul>
  </nav>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

// 定义 props
const props = defineProps({
  currentStatus: {
    type: String,
    default: '全部',
  },
});

// 定义 emits
const emit = defineEmits(['change-status']);

// 状态列表
const statuses = [
  { value: '全部', label: '全部' },
  { value: '未开始', label: '未开始' },
  { value: '进行中', label: '进行中' },
  { value: '已完成', label: '已完成' },
  { value: '已删除', label: '已删除' },
  { value: '新计划', label: '新计划' },
];

// 切换状态
const changeStatus = (status) => {
  emit('change-status', status);
};
</script>

<style scoped>
/* 状态导航栏样式 */
.navbar-status {
  box-sizing: border-box;
  background-color: #ffffff; /* 白色背景 */
  padding: 15px 20px;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  max-width: 1200px;
  margin: 20px auto;
}

.navbar-status ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 20px;
  justify-content: center;
}

.navbar-status li {
  cursor: pointer;
  font-weight: 500;
  font-size: 16px;
  transition: all 0.3s ease;
}

.navbar-status li span {
  display: block;
  padding: 10px 20px;
  border-radius: 8px;
  color: white; /* 默认文字颜色为白色 */
  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* 根据索引设置默认背景色 */
.navbar-status li[data-index='0'] span {
  background-color: #1e90ff; /* 全部：蓝色 */
}

.navbar-status li[data-index='1'] span {
  background-color: #ffa500; /* 未开始：橙色 */
}

.navbar-status li[data-index='2'] span {
  background-color: #1e90ff; /* 进行中：蓝色 */
}

.navbar-status li[data-index='3'] span {
  background-color: #32cd32; /* 已完成：绿色 */
}

.navbar-status li[data-index='4'] span {
  background-color: #ff4500; /* 已删除：红色 */
}

.navbar-status li[data-index='5'] span {
  background-color: #9370db; /* 新计划：紫色 */
}

/* 激活状态样式 */
.navbar-status li.active span {
  background-color: #004080; /* 激活状态：深蓝色 */
  transform: scale(1.05);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.navbar-status li:hover span {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
  filter: brightness(1.1); /* 悬停状态稍微提亮 */
}
</style>